<template>
	<view class="environmentEdit">
		<view class="back">
			<image class="back-img" @click="back" src="../../../static/index/fanhui.png" mode=""></image>
			<text class="back-name">公益助学</text>
		</view>
		<view class="bgTop" style="background-image: url('../../../static/publicwelfare/environmentBg.png');">
			<view class="notice-information">
				<view class="home">
					<view class="list uni-flex uni-column">
						<view class="wrap-item">
							<view class="lis uni-flex uni-column" :animation="animationData">
								<view class="uni-flex uni-column" v-for="(item, index) in commentsList" :key="index">
									<view class="swiper-item item_title uni-flex list_item">
										<view class="userlistmsg bgTop-box">
											<image :src="item.headerImg" mode=""></image>
											<text>{{item.userName}}</text>
											<text>捐赠{{item.num}}积分</text>
											<text>{{item.time}}分钟前</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>




		</view>
		<view class="description">
			<text>河南灾后校园重建</text>
			<text>推动河南省受灾地区灾后重建工作，全力保障复学复课</text>
		</view>
		<view class="count">
			<view class="count-box" v-for="(item,index) in countList" :key="index">
				<text>{{item.text}}：</text><text>{{item.num}}积分</text>
			</view>
		</view>
		<view class="Project-details">
			<view class="Project-details-title">
				<image src="../../../static/publicwelfare/envJIgou.png" mode=""></image>
				<text>项目详情</text>
			</view>
			<view class="project-Introduction">
				项目介绍
			</view>
			<view class="project-content">
				<view class="project-title">
					河南省突遇特大洪水灾害
				</view>
				<view class="essay">
					<view class="essay-box">
						8月2日下午，河南省政府新闻办召开第十场“河南
						省防汛救灾”新闻发布会。会议开始时，在场人员全体
						起立，向因灾遇难者默哀。新闻发布会通报，7月16日
						以来，截至8月2日12时，河南省因灾遇难302人，50人
						失踪。
						截至8月2日12时，全省共有150个县(市、区)1663个
						乡镇、1453.16万人受灾。全省组织紧急避险93.38万人
						转移安置最高峰值147.08万人倒塌房屋30616户、8900
						1间;农作物受灾面积1635.6万亩，成灾面积872.3万亩，
						绝收面积380.2万亩，直接经济损失 1142.69亿元。
					</view>
					<view class="essay-img">
						<image src="../../../static/publicwelfare/smallenBg.png" mode=""></image>
					</view>
					<view class="essay-box" v-if="isOpen">
						8月2日下午，河南省政府新闻办召开第十场“河南
						省防汛救灾”新闻发布会。会议开始时，在场人员全体
						起立，向因灾遇难者默哀。新闻发布会通报，7月16日
						以来，截至8月2日12时，河南省因灾遇难302人，50人
						失踪。
						截至8月2日12时，全省共有150个县(市、区)1663个
						乡镇、1453.16万人受灾。全省组织紧急避险93.38万人
						转移安置最高峰值147.08万人倒塌房屋30616户、8900
						1间;农作物受灾面积1635.6万亩，成灾面积872.3万亩，
						绝收面积380.2万亩，直接经济损失 1142.69亿元。
					</view>
					<view class="see-more" @click="openMore">
						{{isOpen?'收起':'查看完整项目说明'}}
						<image style="width: 23rpx;height: 12rpx;margin-left: 10rpx;"
							src="../../../static/mine/bottomjiantou.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="organizations">
			<view class="organizations-box">
				<image src="../../../static/publicwelfare/huizhang.png" mode=""></image>
				<text>公益机构</text>
			</view>
			<view class="organizations-box2">
				<image style="width: 60rpx;height: 60rpx;" src="../../../static/publicwelfare/envEdit.png" mode="">
				</image>
				<view class="organizations-box2-right">
					<text>河南省慈善总会</text>
					<text>发起与善款接收机构</text>
				</view>
				<view class="check" @click="checkorGanizations">
					查看<image style="width: 12rpx;height: 24rpx;margin-left: 10rpx;"
						src="../../../static/mine/rightjiantou.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="project-progress" @click="clickProgress">
			<view class="project-progress-title">
				<image src="../../../static/publicwelfare/jindu.png" mode=""></image>
				<text>项目进度</text>
			</view>
			<view class="club">
				<image src="../../../static/publicwelfare/envEdit.png" mode=""></image>
				<view class="club-middle">
					<text>河南省慈善总会</text>
					<text>2021-11-04 15：23</text>
				</view>
				<text class="daily">日常进展</text>
			</view>
			<view class="project-progress-content">
				<view class="project-progress-content-title">
					河南新乡市5所学校物资已发出
				</view>
				<view class="project-progress-content-box">
					<text>根据项目组现场调研及当地教育主管部门、学校的申报情况，新乡市第一批援助的5所学校共1000套课桌</text><text class="detail">详情</text>

				</view>
				<view class="project-progress-content-img">
					<image style="width: 120rpx;height: 120rpx;margin-right: 16rpx;" v-for="(item,index) in imgList"
						:key="index" :src="item.img" mode=""></image>
				</view>
			</view>

		</view>
		<view class="illustrate">
			特别说明:源聚变公益环保是由用户使用积分参与的善心活动，
			用户的每一次积分捐赠都会兑换成人民币直接进入公益项目的善
			款接收机构的账户中。
		</view>
		<view class="btn" @click="show = true">
			去捐赠
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="bottom" v-model='show' closeable="true">
			<view style="height: 340rpx;width: 100%;padding: 30rpx 40rpx 0;">
				<view class="pop-title">
					<text>捐积分</text>
					<text>捐赠接收单位：河南省慈善总会</text>
				</view>
				<view class="btn-box">
					<view class="pop-btn" v-for="(item,index) in btnList" @click="num=index" :class="{active:num==index}">
						{{item}}积分
					</view>
				</view>
				<view class="agreement">
					<view :class="isSelete?'roundactive':'round'" @click="clickSelect"><icon type="success_no_circle" size="10" color="#ffffff"/></view>
					<text style="font-size: 24rpx;color: #999999;margin: 0 10rpx;">我已阅读并同意</text><text style="font-size: 24rpx;color: #2E69F1;"  >《用户协议》</text>
				</view>
			</view>
			<view class="btn" style="padding: 0!important;" @click="clickSure">
				去捐赠
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnList:['20','50','100'],
				num:0,//
				show: false, //控制弹框
				imgList: [{
					img: require("../../../static/mine/friendguide/choujiangxiangqing.png")
				}, {
					img: require("../../../static/mine/friendguide/choujiangxiangqing.png")
				}],
				isOpen: false, //查看更多
				countList: [{
					text: '已筹得积分',
					num: '13，400，025'
				}, {
					text: '已捐次数',
					num: '6000'
				}, {
					text: '已捐人数',
					num: '4362'
				}],
				scrollHeight: 0, //向上滚动距离
				height: 0, //.lis高度（滚动框高度）
				animationData: {}, //动画对像
				commentsList: [{
					headerImg: require('../../../static/mine/head.png'),
					userName: 'xxx用户',
					num: "1000",
					time: '5'
				}, {
					headerImg: require('../../../static/mine/head.png'),
					userName: 'xx用户',
					num: "1000",
					time: '5'
				}, {
					headerImg: require('../../../static/mine/head.png'),
					userName: 'xx用户',
					num: "1000",
					time: '5'
				}, {
					headerImg: require('../../../static/mine/head.png'),
					userName: 'xx用户',
					num: "1000",
					time: '5'
				}, {
					headerImg: require('../../../static/mine/head.png'),
					userName: 'xx用户',
					num: "1000",
					time: '5'
				}, {
					headerImg: require('../../../static/mine/head.png'),
					userName: 'xx用户',
					num: "1000",
					time: '5'
				}],
				isSelete:false,//控制选择
			}
		},
		mounted() {
			this.prizeScroll();
		},
		methods: {
			clickSure(){
				uni.navigateTo({
					url:'/myPackageA/index/publicWelfare'
				})
			},
			clickSelect(){
				this.isSelete=!this.isSelete
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			//项目进展
			clickProgress() {
				uni.navigateTo({
					url: '/myPackageA/index/environment/progress'
				})
			},
			//查看机构
			checkorGanizations() {
				uni.navigateTo({
					url: '/myPackageA/index/environment/institutionalIntroduction'
				})
			},
			//点击查看更多
			openMore() {
				this.isOpen = !this.isOpen
			},
			back() {
				uni.navigateBack()
			},
			getHeight(Class) {
				let query = uni.createSelectorQuery().in(this);
				query
					.selectAll(Class)
					.boundingClientRect(data => {
						this.height = data[0].height;
					})
					.exec();
			},
			prizeScroll() {
				let speed = 50;
				let animation = uni.createAnimation({
					duration: this.getHeight('.lis') / speed,
					timingFunction: 'linear',
					delay: 0
				});
				this.animation = animation;
				setInterval(() => {
					if (this.scrollHeight >= this.height) {
						animation.translateY(0).step();
						this.scrollHeight = 0;
						this.animationData = animation.export();
					} else {
						this.scrollHeight = this.scrollHeight + 1;
						animation.translateY(-this.scrollHeight).step();
						this.animationData = animation.export();
					}
				}, speed);
			}
		}
	}
</script>

<style lang="less" scoped>
	.roundactive{
		background-color: #2E69F1;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		opacity: 1;
		border: 1px solid #2E69F1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.agreement{
		display: flex;
		align-items: center;
		margin: 60rpx 0;
		.round{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 28rpx;
			height: 28rpx;
			background: #ffffff;
			border-radius: 50%;
			opacity: 1;
			border: 1px solid #efefef;
		}
		
	}
	.active{
		background-image: url('../../../static/publicwelfare/juanjifenborder.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border: none !important;
	}
	.btn-box{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		.pop-btn{
			width: 200rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			border: 2rpx solid #999999;
			opacity: 1;
			border-radius: 0px;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			color: #FF7200;
		}
	}
	.pop-title{
		text:first-child{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}
		text:last-child{
			margin-left: 20rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
	}
	.btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		background: #FF7200;
		opacity: 1;
		border-radius: 0px;
	}

	.illustrate {
		padding: 80rpx 40rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 48rpx;
		color: #999999;
	}

	.project-progress-content-img {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.project-progress-content {
		padding: 14rpx 0;

		.project-progress-content-title {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}

		.project-progress-content-box {
			text {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			.detail {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7200;
			}
		}
	}

	.project-progress {
		margin: 40rpx 0;
		width: 100%;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		padding: 18rpx 40rpx;

		.club {
			display: flex;
			align-items: center;

			image {
				width: 54rpx;
				height: 54rpx;
			}

			.club-middle {
				margin: 20rpx;
				display: flex;
				flex-direction: column;

				text:first-child {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}

			.daily {
				width: 78rpx;
				height: 24rpx;
				line-height: 24rpx;
				text-align: center;
				background: #FF9595;
				opacity: 1;
				border-radius: 14rpx;
				font-size: 16rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF3030;
			}
		}

		.project-progress-title {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				margin-left: 20rpx;
				color: #333333;
			}
		}
	}

	.organizations {
		width: 100%;
		height: auto;
		padding: 30rpx 40rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;

		.organizations-box2 {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.check {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin-left: 290rpx;
			}

			.organizations-box2-right {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				text:first-child {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.organizations-box {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin-left: 20rpx;
			}
		}
	}

	.project-content {
		width: 100%;
		height: auto;
		position: relative;

		.see-more {
			width: 100%;
			height: 60rpx;
			background: linear-gradient(1deg, #FFFFFF 0%, rgba(255, 255, 255, 0.72) 100%);
			opacity: 1;
			line-height: 60rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF7200;
			position: absolute;
			bottom: 0rpx;
			left: 0;
		}

		.project-title {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}

		.essay {
			.essay-box {
				text-indent: 2em;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				padding-bottom: 30rpx;
			}

			.essay-img {
				padding: 40rpx 0;

				image {
					width: 100%;
					height: 200rpx;
				}
			}
		}
	}

	.project-Introduction {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin: 40rpx 0;
		color: #666666;
	}

	.Project-details {
		margin: 40rpx 0;
		width: 100%;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 18rpx 40rpx 0px;

		.Project-details-title {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin-left: 20rpx;
			}
		}
	}

	.count {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;

		.count-box {
			text:first-child {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			text:last-child {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7200;
			}
		}
	}

	.description {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		margin: 40rpx 0;
		display: flex;
		flex-direction: column;
		padding: 20rpx 40rpx;
		line-height: 52rpx;

		text:first-child {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		text:last-child {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
	}

	.home,
	.list {
		width: 100%;
		padding-top: 30upx;
		height: 100%;
		overflow: hidden;
	}

	.notice-information {
		flex: 1;
		height: 80%;
		margin-top: 66rpx;
		margin-right: 20px;
	}

	.bgTop {
		width: 100%;
		height: 440rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 40rpx;

		.bgTop-box {
			margin-bottom: 30rpx;
			background-color: rgba(255, 255, 255, 0.5);
			width: 470rpx;
			height: 56rpx;
			border-radius: 28px;
			display: flex;
			padding: 10rpx;
			justify-content: space-between;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

			text:last-child {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.back {
		padding-top: 80rpx;
		width: 100%;
		height: 176rpx;
		background-color: #24AE3E;
		display: flex;
		align-self: center;
		padding-left: 0 !important;
		padding-right: 0 !important;

		.back-img {
			width: 40rpx;
			height: 40rpx;
			margin-top: 10rpx;
			margin-left: 40rpx;
		}

		.back-name {
			font-size: 18px;
			line-height: 31px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 18rpx;
		}
	}
</style>
